<template>
  <el-main>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form :inline="true" :model="form" label-width="80px" size="mini">
          <el-form-item>
            <el-button type="primary" @click="search">刷新</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="showAdd">添加</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="序号" width="60px">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="key" label="key"> </el-table-column>
          <el-table-column prop="source" label="源地址"> </el-table-column>
          <el-table-column prop="resolution" label="分辨率"></el-table-column>
          <el-table-column prop="lazy" label="懒加载">
            <template slot-scope="scope">
              <div v-if="scope.row.lazy">是</div>
              <div v-if="!scope.row.lazy">否</div>
            </template>
          </el-table-column>
          <el-table-column prop="alive" label="存活">
            <template slot-scope="scope">
              <div v-if="scope.row.alive">是</div>
              <div v-if="!scope.row.alive">否</div>
            </template>
          </el-table-column>
          <el-table-column prop="players" label="播放端">
            <template slot-scope="scope">
              <div
                v-for="(item, index) in tableData[scope.$index].players"
                :key="index"
              >
                {{ item.key }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="管理">
            <template slot-scope="scope">
              <el-button
                @click="showPreview(scope.row)"
                type="primary"
                size="mini"
                >预览</el-button
              >
              <el-button @click="remove(scope.row)" type="danger" size="mini"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <Add :addVisible="addVisible" @hideAdd="hideAdd" @search="search"></Add>
    <Preview
      :previewVisible="previewVisible"
      :row="row"
      @hidePreview="hidePreview"
      @search="search"
    ></Preview>
  </el-main>
</template>

<script>
import Add from "./Add";
import Preview from "./Preview";

export default {
  data() {
    return {
      form: {},
      tableData: [],
      addVisible: false,
      previewVisible: false,
      playHlsRow: {},
      selectedRows: [],
      row: {},
    };
  },
  components: { Add, Preview },
  methods: {
    search() {
      this.$axios.get("/streamer/list").then((res) => {
        if (res.data.code != 0) {
          this.$message.error(res.data.msg);
        } else {
          this.tableData = res.data.data;
        }
      });
    },
    showAdd() {
      this.addVisible = true;
    },
    hideAdd() {
      this.addVisible = false;
    },
    showPreview(row) {
      this.row = row;
      this.previewVisible = true;
    },
    hidePreview() {
      debugger;
      this.previewVisible = false;
    },
    remove(row) {
      this.$confirm("确定删除吗?", {
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post("/streamer/delete", {
              key: row.key,
            })
            .then((res) => {
              if (res.data.code == 0) {
                this.search();
              } else {
                this.$message.error(res.data.msg);
              }
            });
        })
        .catch(() => {});
    },
  },
  mounted() {
    this.search();
  },
};
</script>
